import QtQuick 2.12
import QtGraphicalEffects 1.12
import "./bubble" as Bubble

Item {

    id:container
    property var headSrc
    property var myHeadSrc: "qrc:/head/myhead.jpg"
    property var bubbleIndex: 0

    height: _layout.height + 10
    width: ListView.view.width
    signal exitRequest()


    state: msgType
    states: [
        State {
              name: "hint"
              AnchorChanges { target: _layout;
                  anchors.horizontalCenter: container.horizontalCenter;
                  anchors.verticalCenter: container.verticalCenter; }
        },
        State {
              name: "hintDate"
              AnchorChanges { target: _layout;
                  anchors.horizontalCenter: container.horizontalCenter;
                  anchors.verticalCenter: container.verticalCenter; }
        },
        State {
              name: "recv"
              AnchorChanges { target: _layout;
                  anchors.left: container.left;
                  anchors.verticalCenter: container.verticalCenter; }
        },
        State {
              name: "send"
              AnchorChanges { target: _layout;
                  anchors.right: container.right;
                  anchors.verticalCenter: container.verticalCenter; }
        }
    ]

    Row{
        id:_layout
        anchors.leftMargin: 20
        anchors.rightMargin: 20
        spacing: 4
        // msgType 由ChatData 给出。确定从右往左，还是从左往右
        layoutDirection: msgType == "send" ? Qt.RightToLeft : Qt.LeftToRight

        // 头像
        HeadImage{
            id:_head
            width: 50
            height: 50
            headUrl: msgType == "recv" ? headSrc : myHeadSrc
            visible: msgType == "recv" || msgType == "send"
        }

        // 提示消息
        Text{
            id:_hint
            visible: msgType == "hint" || msgType == "hintDate"
            text: msgType == "hintDate" ? getChatDate() : msg
            color: "#B0B0B0"
            font.pixelSize: 14
            font.family: "Microsoft Yahei"
            wrapMode: Text.WrapAnywhere
            elide: Text.ElideRight
            width: container.width - 40
            height:  30
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        // 聊天气泡
        Bubble.ChatBubble{
            id: _msg
            visible: msgType == "recv" || msgType == "send"
            msgText: msgType == "recv" || msgType == "send" ? msg : ""
            isSend: msgType =="send" ? true :false
            iconHeight: _head.height
            maxWidth: container.width - _layout.anchors.leftMargin * 2 - _head.width - _layout.spacing * 2
            bubbleIndex: container.bubbleIndex      // 消息样式
        }
    }

    Component.onCompleted: chatView.positionViewAtEnd();


    // 1天内直接显示时间，2天加个昨天，3天加个前天。3天前显示年月日
    function getChatDate () {
        var total = new Date() - date;
        if (total < (1000*60*60*24)) {  // 1天以内
            return date.toLocaleTimeString(Qt.locale(), "hh:mm");
        } else if (total < (1000*60*60*24) * 2) {   // 2天
            return "昨天 "+date.toLocaleTimeString(Qt.locale(), "hh:mm");
        } else if (total < (1000*60*60*24) * 3) {   // 3天
            return "前天 "+date.toLocaleTimeString(Qt.locale(), "hh:mm");
        } else {   // 3天前
            return date.toLocaleString(Qt.locale(), "yyyy年M月d日 hh:mm");
        }
    }

}
